<template>
  <div :class="classes" :lay-showPercent="showPercent" :lay-filter="filter">
  	<div :class="childClasses" :lay-percent="percent"></div>
	</div>
</template>

<script>
import element from "../element";
import { oneOf } from "../../utils/assist";

const prefixCls = 'layui-progress';

export default {
  name: "Progress",
  props: {
		filter:{
			type:String,
			required:true
		},
    percent: String | Number,
		showPercent: Boolean,
		skin:{
			type:String,
			validator(value){
				return oneOf(value,['red','orange','green','cyan','blue','black','gray']);
			}
		},
		big:Boolean
	},
	computed:{
		classes(){
			return [prefixCls,{
				[`${prefixCls}-big`]:!!this.big
			}]
		},
		childClasses(){
			return [`${prefixCls}-bar`,{
				[`layui-bg-${this.skin}`]:!!this.skin
			}]
		}
	},
	mounted(){
    this.$nextTick(() => {
      element.render("progress");
    });
	},
  updated() {
    this.$nextTick(() => {
			if(this.filter){
				element.progress(this.filter,this.percent);
			}
    });
  }
};
</script>

<style scoped>

</style>